<template>
    <div class="integral">
      <div class="integral-header">
        <p ﻿@tap="isShowRule = true">规则说明</p>
        <div class="integral-header-num">
          <p>可用积分</p>
          <p>{{integral.int}}</p>
        </div>
      </div>
      <div class="integral-title">
        <p>积分记录</p>
        <p ﻿@tap="goPage">点击兑换 >></p>
      </div>
      <div class="integral-content">
        <div class="integral-content-title">
          <div>
            <p></p>
            <p>全部</p>
          </div>
          <div>
            <p>获取：{{integral.get_int}}</p>
            <p>使用：{{integral.use_int}}</p>
          </div>
        </div>
        <integral v-for="(item,index) in integralList" :key="index" :record="item"></integral>
      </div>
      <van-popup :show="isShowRule" @close="isShowRule = false" position="bottom">
        <div class="rule-content">
          <h1>积分规则说明</h1>
          <p>①积分可通过完成影沐平台任务获得，详见我的-积分&福利。</p>
          <p>②积分专属影沐平台,仅限影沐影视文化平台内使用，不可转赠。</p>
          <p>③积分可以累积，100经验值即可自动兑换10积分。</p>
          <p>④积分可用于影沐平台礼品兑换，详见首页-活动专区，兑换后积分自动扣除。</p>
          <p>⑤兑换礼品后可在我的-客服，联系平台客服人员联络兑换事宜。</p>
        </div>
      </van-popup>
      <bottoms info="暂无积分记录～"></bottoms>
    </div>
</template>

<script>
  import integral from "@/components/integral/index"
  import bottoms from '@/components/reachBottom/index'
    export default {
        name: "integral",
      components:{
        integral,
        bottoms
      },
      data(){
          return{
            isShowRule: false,
            state:0,
            integralList:[],
            integral: {},
            loadingEnd:{
              moduleOne: false,
              moduleTwo: false
            },
            totalPage: 1,
            currentPage: 1,
            totalCount: 0,
            type: "", //1为获取积分，2为使用积分，空为全部
          }
      },
      methods:{
        goPage(){
			uni.navigateTo({
				url: '/activity/index'
			})
        },
        allBtn(){
          if(this.state === 0){
            this.state = 1;
          }
          else {
            this.state = 0;
          }
        },
        switchToViewBtn(state){
          this.state = 0;
          this.type = state;
          this.currentPage = 1;
          this.totalCount = 0;
          this.integralList = [];
          this.getIntList();
        },
        myIntegral(){
          this.$ajax
            .post(this.$api.myIntegral)
            .then(res => {
              console.log(res)
              this.loadingEnd.moduleOne = true;
              this.integral = res;
              this.getIntList();
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true;
              this.loadingEnd.moduleTwo = true;
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        getIntList(){
          this.$ajax
            .post(this.$api.intList,{
              page_size: 10,
              page: this.currentPage,
              type: this.type
            })
            .then(res => {
              this.loadingEnd.moduleTwo = true;
              this.integralList.push(...res.data);
              this.totalPage = res.total_page;
              this.totalCount = res.total_count;
              if(res.total_count === 0){
                this.$store.dispatch("changeIsEmpty", true);
              } else {
                this.$store.dispatch("changeIsEmpty", false);
              }
            })
            .catch(err => {
              this.loadingEnd.moduleTwo = true;
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        viewLoad(){
          this.integral= 0;
          this.currentPage=1;
          this.integralList = [];
          this.loadingEnd = {
            moduleOne: false,
            moduleTwo: false
          };
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.myIntegral();
        },
      },
      onPullDownRefresh(){
        this.viewLoad();
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      onReachBottom(){
        if(this.totalPage > this.currentPage){
          this.$store.dispatch("changeIsMore", true);
          this.$store.dispatch("changeIsEnd", false);
          this.currentPage++;
          this.getIntList();
        } else {
          this.$store.dispatch("changeIsEnd", true);
          this.$store.dispatch("changeIsMore", false);
        }
      },
      onShow(){
        this.type = "";
        this.viewLoad()
      },
      computed:{
        // ...mapState({sessionId:"sessionId"}),
        hideLoading(){
          if(this.loadingEnd.moduleOne && this.loadingEnd.moduleTwo){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
    }
</script>

<style>
  page {
    height: 100%;
  }
  .integral{
  padding: 0 0 30rpx;
  width: 100%;
  box-sizing: border-box;
}
  .integral-header{
    padding-top: 48rpx;
    width: 100%;
    height: 483rpx;
    background-image: url("https://test.hrycf.com/front/jifen.jpg");
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
    -moz-background-size:100% 100% !important;
    box-sizing: border-box;
  }
.integral-header>p:first-child{
  width: 192rpx;
  height: 50rpx;
  background-color: #FFFFFF;
  border-radius: 0 25rpx 25rpx 0;
  text-align: center;
  line-height: 50rpx;
  color: #EF5A56;
  font-size: 28rpx;
  font-family:PingFang SC;
  font-weight:500;
}
.integral-header-num{
  width: 250rpx;
  height: 250rpx;
  background-image: url("https://test.hrycf.com/front/jifenc.png");
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  -moz-background-size:100% 100% !important;
  margin: 11rpx auto;
  text-align: center;
  padding-top: 79rpx;
  box-sizing: border-box;
}
  .integral-header-num>p{
    color: #EF5A56;
    font-size: 30rpx;
    font-family:PingFang SC;
    font-weight:500;
  }
  .integral-header-num>p:last-child{
    font-size: 54rpx;
  }
  .integral-content{
    padding: 61rpx 30rpx 0;
  }
  .integral-content-title{
    display: flex;
    justify-content: space-between;
    font-size: 30rpx;
    color: #323232;
    font-family:PingFang SC;
    font-weight:bold;
  }
  .integral-content-title>div:first-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .integral-content-title>div:first-child>p:first-child{
    width: 6rpx;
    height: 28rpx;
    border-radius: 2rpx;
    background-color: #EF5A56;
    margin-right: 19rpx;
  }
  .integral-content-title>div:last-child{
    display: flex;
  }
  .integral-content-title>div:last-child>p:first-child{
    margin-right: 66rpx;
  }
/*  .integral-header{*/
/*    padding: 10rpx;*/
/*    box-sizing: border-box;*/
/*    background-color: #EF5A56;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    border-radius: 10rpx;*/
/*  }*/
/*.integral-header>i{*/
/*  font-size: 36rpx;*/
/*}*/
/*  .integral-header-content{*/
/*    width: 100%;*/
/*    height: 130rpx;*/
/*    padding-right: 38rpx;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    color: #FFFFFF;*/
/*    font-weight: bold;*/
/*  }*/
/*.integral-header-content>p{*/
/*  font-size: 30rpx;*/
/*}*/
/*.integral-header-content>div>p:first-child{*/
/* text-align: right;*/
/*  font-size: 60rpx;*/
/*}*/
/*.integral-header-content>div>p:last-child{*/
/*  font-size: 22rpx;*/
/*}*/
  .integral-title{
    display: flex;
    justify-content: space-between;
    padding: 25rpx 120rpx 33rpx;
    border-bottom: 4rpx solid #EF5A56;
  }
  .integral-title>p{
    font-size:34rpx;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }
  .integral-title>p:first-child{
    color: #EF5A56;
  }
  .rule-content{
    padding: 40rpx
  }
  .rule-content h1{
    font-size: 32rpx;
    text-align: center;
    margin-bottom: 40rpx;
    font-weight: bold;
  }
  .rule-content p{
    font-size: 24rpx;
    line-height: 44rpx;
  }
  /*.integral-title-all{*/
  /*  display: flex;*/
  /*  align-items: center;*/
  /*}*/
  /*.integral-title-all>p{*/
  /*  margin-right: 8rpx;*/
  /*}*/
  /*.integral-title-popup>p{*/
  /*  width: 180rpx;*/
  /*  height: 88rpx;*/
  /*  background-color: #FF9B44;*/
  /*  color: #ffffff;*/
  /*  font-size: 26rpx;*/
  /*  text-align: center;*/
  /*  line-height: 88rpx;*/
  /*  border-radius: 6rpx;*/
  /*  border-bottom: 1rpx solid #ffffff;*/
  /*}*/
  /*.integral-title-popup{*/
  /*  position: absolute;*/
  /*  bottom: 0;*/
  /*  right: 0;*/
  /*  margin-bottom: -175rpx;*/
  /*}*/
</style>
